'use client';

import Image from "next/image";
import Link from "next/link";
import { useWallet } from "@/components/ui/WalletProvider";
import { useEffect,useState } from "react";

export default function Home() {
  const { account, isConnecting, error, connectWallet , tokenContract, heroContract , battleContract, currentUser} = useWallet();
  
  const [balance, setBalance] = useState(0);

  useEffect(() => {
    const getBalance = async () => {
      if (tokenContract) {
        const balance = await tokenContract.balanceOf(account);
        setBalance(balance.toString());
      }
    };
    getBalance();
  },[tokenContract])

  if (!account) {
    return (
      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
          <h1 className="text-3xl font-bold text-gray-900 mb-6 text-center">欢迎来到三国杀</h1>
          <p className="text-gray-600 mb-6 text-center">请先连接您的钱包以开始游戏</p>
          <button
            onClick={connectWallet}
            disabled={isConnecting}
            className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed transition-colors"
          >
            {isConnecting ? '连接中...' : '连接钱包'}
          </button>
          {error && <p className="mt-4 text-red-600 text-center">{error}</p>}
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-gray-900 mb-8">欢迎来到三国杀</h1>
          <div className="border-black border-8 mb-10">
            <h2>测试内容</h2>
            <p className="mb-5">当前账户地址: {account}</p>
            <p className="mb-5">当前用户ID: {currentUser}</p>
            <p className="mb-5">当前账户余额：{balance} TK</p>
            <p className="mb-5">代币合约地址: {process.env.NEXT_PUBLIC_TOKEN_ADDRESS}</p>
            <p className="mb-5">英雄合约地址: {process.env.NEXT_PUBLIC_HEROCARD_ADDRESS}</p>
            <p className="mb-5">游戏合约地址: {process.env.NEXT_PUBLIC_BATTLE_ADDRESS}</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Link href="/game/battle" className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
              <h2 className="text-2xl font-semibold text-gray-900 mb-2">对战</h2>
              <p className="text-gray-600">开始一场激动人心的卡牌对战</p>
            </Link>
            <Link href="/game/deck" className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
              <h2 className="text-2xl font-semibold text-gray-900 mb-2">卡组</h2>
              <p className="text-gray-600">管理你的卡牌和卡组</p>
            </Link>
            <Link href="/market" className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
              <h2 className="text-2xl font-semibold text-gray-900 mb-2">市场</h2>
              <p className="text-gray-600">交易卡牌和游戏道具</p>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
